<template>
	<view>
		<view class="container">
			<view class="box1">
				<image src="/static/images/img_helpyou.png" class="img_helpyou"></image>
				<view class="content">
					<view class="title1">提交您的找房需求</view>
					<view class="title2"></view>
					<view class="ttile3">快速为您匹配优质房源</view>
				</view>
			</view>
			<view class="box2">
				<view class="tc fs34">购房预算(万元)</view>
				<!-- <view class="budget">{{value==1000?'无限':value}}{{value==1000?'':'万'}}</view>
				<slider @change="sliderchange" block-size='15' block-color='#0091ff' backgroundColor='#f6f7fa'
					activeColor='#0091ff' class="slider" min="0" max="1000" />
				<view class="flex-box flex-between">
					<view class="fs30">10万</view>
					<view class="fs30">无限</view>
				</view> -->
				
				<view class="price-cont">
					<view class="price-item">
						<input type="text" v-model="min_total_price" >
					</view>
					<view class="price-zhi">至</view>
					<view class="price-item">
						<input type="text" v-model="max_total_price">
					</view>
				</view>
				
				<view class="title">理想区域</view>
				<picker @change="bindPickerChange" :value="index" :range="regionPickerData">
					<view class="flex-box flex-between picker">
						<view class="flex-grow-1">{{ regionPickerData[index] }}</view>
						<image src="/static/icon/icon_arrowd.png" class="icon_arrowd"></image>

					</view>
				</picker>
				<view class="title">理想户型</view>
				<view class="flex-box flex-wrap typebox">
					<!-- <view :class="'typeitem ' + (room_num_index == -1 ? 'active' : '')" data-typeindex="-1" @tap="choosetype">不限</view> -->

					<view :class="'typeitem ' + (room_num_index == index ? 'active' : '')" :data-typeindex="index"
						@tap="choosetype" v-for="(item, index) in roomnumData">
						{{item.name}}
					</view>
				</view>

				<button class="sure" @tap="submit">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');

	export default {
		data() {
			return {
				type: 0, //默认不限户型
				reserveStatus: false,
				//预约成功弹窗
				appoint_mobile: '',
				appoint_mobile_text: '',
				broker_user_id: 0,
				value: 10,
				//购房预算
				regionData: [],
				//区县列表
				roomnumData: [],
				//户型搜索数据
				index: 0,
				regionPickerData: [],
				room_num_index: -1,
				//默认不限户型
				helpyou_image: '',
				remark: '',
				min_total_price:0,
				max_total_price:0,
			};
		},
		onLoad: function(options) {
			this.initData();
		},
		onShow: function() {
			this.helpyou_image = app.globalData.config.helpyou_image
		
		},
		methods: {
			sliderchange(e) {
				this.value = e.detail.value;
			},
			sliderchange(e) {
				let value = this.value;
				value = e.detail.value;
				this.value = value


			},

			bindPickerChange: function(e) {
				this.index = e.detail.value

			},

			choosetype(e) {
				var room_num_index = e.currentTarget.dataset.typeindex;
				this.room_num_index = room_num_index

			},

			closeReserveStatus() {
				this.reserveStatus = false
				// 返回上一页

				uni.navigateBack();
			},

			remarkFun(e) {
				this.remark = e.detail.value

			},

			submit() {
				var that = this;
				var now_city = uni.getStorageSync('now_city') || '上海市';
				var region = that.index == 0 ? '' : that.regionData[that.index - 1].name;
				var house_search_roomnum_ids = that.room_num_index == -1 ? '' : that.roomnumData[this.room_num_index].id;
				var json = {
					type: 4,
					//
					mobile: uni.getStorageSync('mobile') || '',
					//
					min_total_price: this.min_total_price,
					max_total_price: this.max_total_price,
					//
					// max_total_price: that.value == 1000 ? -1 : that.value,
					city: now_city,
					//
					region: region,
					//
					house_search_roomnum_ids: house_search_roomnum_ids,
					remark: that.remark
				};
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(that, '/api/xiluhouse/house/create_appoint_log', json, function(
							res) {
								functions.showSuccess(res.msg,function(){
									uni.navigateBack();
								});						
						});
					} else {
						functions.toast('请先登录');
					}
				});
			},

			initData() {
				var that = this;
				var now_city = uni.getStorageSync('now_city') || '上海市'; // 获取---通用类-根据城市获取区县

				functions.getAjaxData(
					'/api/xiluhouse/universal/region_data', {
						city: now_city
					},
					function(res) {
						var now_index = 0;
						var regionPickerData = [];
						regionPickerData[0] = '不限';

						for (let index = 0; index < res.data.length; index++) {
							const element = res.data[index];
							regionPickerData[Number(index) + 1] = element.name;
						}

						that.index = now_index,
							that.regionPickerData = regionPickerData,
							that.regionData = res.data

					}
				);
				functions.getAjaxData('/api/xiluhouse/universal/search_roomnum_data', {}, function(res) {
					that.roomnumData = res.data

				});
			},

			jumpToChat() {
				console.log('占位：函数 jumpToChat 未声明');
			}
		},
	}
</script>

<style lang="scss">
	.box1 {
		width: 750rpx;
		height: 400rpx;
		position: relative;
		z-index: 1;
	}

	.img_helpyou {
		width: 750rpx;
		height: 400rpx;
	}

	.content {
		width: 750rpx;
		height: 400rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .3);
		color: #fff;
		text-align: center;
		padding-top: 70rpx;
		z-index: 2;
	}

	.content .title1 {
		font-size: 50rpx;
	}

	.content .title2 {
		width: 30rpx;
		height: 6rpx;
		border-radius: 3rpx;
		background: #ffffff;
		margin: 23rpx auto 20rpx;
	}

	.content .title3 {
		font-size: 30rpx;
	}

	.box2 {
		width: 670rpx;
		padding: 36rpx 35rpx 40rpx;
		background: #fff;
		position: relative;
		z-index: 3;
		margin: -120rpx auto 40rpx;
		border-radius: 15rpx;
		box-shadow: 0px 4rpx 30rpx rgba(184, 189, 202, 0.3);
	}

	.box2 .budget {
		width: 200rpx;
		height: 70rpx;
		border-radius: 35rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		font-size: 30rpx;
		line-height: 70rpx;
		color: #fff;
		text-align: center;
		margin: 30rpx auto;
	}

	.slider {
		margin: 0 24rpx 10rpx;
	}

	.title {
		font-size: 34rpx;
		padding: 36rpx 0 28rpx;
		text-align: center;
	}

	.picker {
		height: 80rpx;
		border-radius: 10rpx;
		background: #f6f7fa;
		padding: 0 24rpx 0 20rpx;
	}

	.icon_arrowd {
		width: 23rpx;
		height: 13rpx;
	}

	.typebox .typeitem {
		width: 180rpx;
		height: 75rpx;
		text-align: center;
		line-height: 75rpx;
		border-radius: 10rpx;
		background: #f6f7fa;
		font-size: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.typebox .typeitem:nth-of-type(3n) {
		margin-right: 0;
	}

	.typebox .typeitem.active {
		background: var(--blue);
		color: #fff;
	}

	.box2 .sure {
		height: 80rpx;
		border-radius: 10rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		padding: 0;
		margin: 0;
		width: 100%;
		line-height: 80rpx;
		color: #fff;
		font-weight: normal;
		font-size: 30rpx;
		margin-top: 10rpx;
	}
	
	.price-cont{
		width:100%;
		height:auto;
		overflow:hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		padding:36rpx 0 0;
		.price-item{
			width:40%;
			height:80rpx;
			line-height:40rpx;
			font-size:30rpx;
			color:#000;
			overflow:hidden;
			padding:20rpx 5rpx;
			text-align:center;
			background:#f6f7fa;
			box-sizing:border-box;
			input{
				width:100%;
				height:50rpx;
				line-height:40rpx;
				font-size:30rpx;
				color:#000;
				display:block;
				overflow:hidden;
				text-align:center;
			}
		}
		
		.price-zhi{
			width:8%;
			height:40rpx;
			line-height:40rpx;
			font-size:30rpx;
			color:#000;
			display:block;
			flex-shrink:0;
			overflow:hidden;
			text-align:center;
			box-sizing:border-box;
		}
		
	}
	
</style>
